<template>
     <div class="roomtype">
    <div class="search">
      <el-button type="primary" size="small" @click="editRef.drawer = true">添加</el-button>
    </div>
    <el-table size="small" :data="formattedRoomImages" style="width: 98%">
      <el-table-column label="序号" width="100" type="index"/>
      <el-table-column v-if="false" prop="id" label="编号" width="100"/>
      <el-table-column prop="roomType" label="房型名称" width="120"/>
      <el-table-column prop="roomNum" label="房间数量" width="100"/>
      <el-table-column prop="peopleNum" label="可容纳人数" width="100"/>
      <el-table-column prop="price" label="房间价格" width="180"/>
      <el-table-column prop="roomImage" label="房型图片" width="180">
        <template #default="scope">
          <div class="demo-image__preview" v-if="scope.row.roomImageList">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.roomImageList[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.roomImageList"
              :initial-index="4"
              fit="cover"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      small
      background
      layout="prev, pager, next"
      :total="list.length"
      :page-size="pageSize"
      v-model:current-page="pageIndex"
      @current-change="handleCurrentChange"
    />
    <EditRoomType ref="editRef" @sync-list="loadList"></EditRoomType>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { $list, $findById } from '../../api/roomType.ts';
import EditRoomType from '../../components/room/EditRoomType.vue';
import { ElNotification } from 'element-plus';

// 房型列表
let list = ref([]);
// 当前页
let pageIndex = ref(1);
// 每页显示的条数
let pageSize = ref(5);

// 图片
const formattedRoomImages = computed(() => {
  return showList.value.map(item => {
    if (item.roomImage) {
      item.roomImageList = item.roomImage.split(';');
    }
    return item;
  });
});

// 分页后的列表
const showList = computed(() => {
  const start = (pageIndex.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return list.value.slice(start, end);
});

// 加载房型列表
const loadList = async () => {
  let ret = await $list();
  if (ret.code === 2001) {
    list.value = ret.data;
  }
};

// 编辑组件ref对象
let editRef = ref(null);

// 编辑方法
const handleEdit = async (id: number) => {
  let ret = await $findById({ id });
  if (ret.code === 4001) {
    ElNotification({
      title: '失败！',
      message: '服务器异常，请联系管理员！',
      type: 'error',
    });
    return;
  }
  console.log(ret.data);
  
  editRef.value.formData2 = ret.data;
  editRef.value.drawer2 = true;
};

// 删除方法
const handleDelete = async (id: number) => {
  // 实现删除逻辑
  // 示例：调用删除接口
  // const ret = await $deleteById({ id });
  // if (ret.code === 2001) {
  //   ElNotification({
  //     title: '成功！',
  //     message: '删除成功！',
  //     type: 'success',
  //   });
  //   loadList();
  // } else {
  //   ElNotification({
  //     title: '失败！',
  //     message: '删除失败！',
  //     type: 'error',
  //   });
  // }
};

// 处理当前页码变化
const handleCurrentChange = (newPage: number) => {
  pageIndex.value = newPage;
};

onMounted(() => {
  loadList();
});
</script>

<style lang="scss" scoped>
.search{
    margin-bottom: 5px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

</style>